<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 需要通过子传父方式进行数据的传递 事件的方式 -->
        <todo-input @add="handleToDoAdd"></todo-input>
        <!-- <todo-item></todo-item>
        <todo-item></todo-item>
        <todo-item></todo-item> -->
        <todo-item @del="handleToDoDelete" v-for="(item,index) in todos" :item='item' :index="index"></todo-item>
    </div>
    <script src="./vue.js"></script>
    <script>
        /* 添加输入框组件 */
        Vue.component("todo-input",{
            data:function(){
                return {
                    value:""
                }
            },
            methods: {
                handleAdd:function(){
                    // 做一个非空的判断
                    if(!this.value){
                        alert("输入的值不为空");
                        return;
                    }
                    console.log("添加的值,",this.value);
                    // 子传父的方式 回传 父 data=>todos
                    // [{id:..,text:...}]
                    // id 
                    let todo = {
                        id:Date.now(),
                        text:this.value
                    }
                    // 把 todo 通过 子传父的方式 进行回传
                    this.$emit("add",todo);
                }
            },
            template:`
                <div>
                    <input type="text" v-model="value" /> <button @click="handleAdd">添加</button>
                </div>
            `
        })
        /*  todo item 组件 */
        Vue.component("todo-item",{
            props:{
                item:{
                    type:Object,
                    default:{}
                },
                index:{
                    type:Number,
                    default:0
                }
            },
            methods:{
                handleDelete:function(){
                    this.$emit("del",this.index);
                }
            },
            template:`
                <li>{{item.text}}<button @click="handleDelete">删除</button></li>
            `
        })
        let vm = new Vue({
            el:"#app",
            methods:{
                handleToDoDelete:function(index){
                    // console.log(index);
                    this.todos.splice(index,1);
                },
                handleToDoAdd:function(todo){
                    console.log("接收到的todo，",todo);
                    // 将项装到 todos 中
                    this.todos.push(todo);
                    // 这样做有问题，不会响应去修改界面
                    // Vue 2.x 版本中不可以
                    // this.todos[this.todos.length] = todo;
                    
                }
            },
            data:{
                todos:[
                    {
                        id:1,
                        text:"吃饭"
                    },
                    {
                        id:2,
                        text:"睡觉"
                    },
                    {
                        id:3,
                        text:"打豆豆"
                    }
                ]
            }
        })
    </script>
</body>
</html>